<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.main-container {
  height: 100vh;
  width: 100%;
}

.el-header {
  background-color: #ffffff;
  color: #333;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.el-aside {
  background-color: #304156;
  color: #fff;
  position: relative;
  transition: width 0.3s;
  height: 100vh;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 180px;
}

.el-menu {
  border-right: none;
  height: calc(100% - 50px);
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
  overflow-y: auto;
}

.collapse-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.logo {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  .app-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
  }

  .app-logo {
    width: 28px;
    height: 28px;
    margin: auto;
  }

  .collapse-icon {
    font-size: 28px;
    cursor: pointer;
  }
}
</style>
<template>
  <el-container>
    <!-- 侧边栏区域 - 菜单 -->
    <!-- <el-aside :width="isCollapse ? '64px' : '180px'" class="menu-aside">
      <div class="menu-header">
        <img src="../public//favicon.png" class="app-logo" />
        <span class="app-title" v-if="!isCollapse">微信转发机器人</span>
        <el-icon class="collapse-icon" @click="toggleCollapse">
          <Fold v-if="!isCollapse" />
          <Expand v-else />
        </el-icon>
      </div>

      <el-menu
        :collapse="isCollapse"
        default-active="home"
        class="main-menu"
        @select="handleMenuSelect"
      >
        <el-menu-item index="home">
          <el-icon><HomeFilled /></el-icon>
          <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="rules" :disabled="stepStore.activeStep === 0">
          <el-icon><Setting /></el-icon>
          <template #title>配置转发规则</template>
        </el-menu-item>
      </el-menu>
    </el-aside> -->

    <!-- 主要内容区域 -->
    <el-main>
      <el-card>
        <el-steps
          :active="stepStore.activeStep"
          finish-status="success"
          simple
          class="steps"
        >
          <el-step title="微信登录" @click="handleStepClick(0)" />
          <el-step title="配置转发规则" @click="handleStepClick(1)" />
          <el-step title="开始转发" @click="handleStepClick(2)" />
        </el-steps>
      </el-card>
      <component :is="currentComponent"></component>
    </el-main>
  </el-container>
</template>

<script>
import { ref, computed } from "vue";
import WeChatBot from "./components/WeChatBot.vue";
import TransferRules from "./components/TransferRules.vue";
import { useStepStore } from "./store/stepStore";
import {
  HomeFilled,
  Setting,
  Link,
  UploadFilled,
  Expand,
  Fold,
} from "@element-plus/icons-vue";

export default {
  name: "App",
  components: {
    WeChatBot,
    TransferRules,
    HomeFilled,
    Setting,
    Link,
    UploadFilled,
    Expand,
    Fold,
  },
  setup() {
    // 菜单折叠状态
    const isCollapse = ref(false);

    // 获取步骤状态
    const stepStore = useStepStore();

    const handleStepClick = (step) => {
      stepStore.setStep(step);
    };
    // 当前显示的组件
    const activeMenu = ref("home");

    const currentComponent = computed(() => {
      if (activeMenu.value === "home") {
        return WeChatBot;
      } else if (activeMenu.value === "rules") {
        return TransferRules;
      }
      return WeChatBot;
    });

    // 切换菜单折叠状态
    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value;
    };

    // 处理菜单选择
    const handleMenuSelect = (key) => {
      // 如果菜单项被禁用，这个函数不会被调用，因为Element Plus会拦截点击事件
      activeMenu.value = key;
    };

    return {
      isCollapse,
      handleStepClick,
      stepStore,
      currentComponent,
      toggleCollapse,
      handleMenuSelect,
    };
  },
};
</script>
